<template>
    <div class="Index">
        <div class="box">
                <!-- 按钮 -->
           <div class="anniu">
            <button v-on:click="index = 1">春装</button>
            <button v-on:click="index = 2">夏装</button>
            <button v-on:click="index = 3">秋装</button>
            <button v-on:click="index = 4">冬装</button>
            <button v-on:click="index = 5">童装</button>
           </div>
        <!-- 内容 -->
        <ul v-show="index == 1">
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.1.jpg" alt="">
                </a>
            </li>
        </ul>
        <ul v-show="index == 2">
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.2.jpg" alt="">
                </a>
            </li>
        </ul>
        <ul v-show="index == 3">
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.3.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.3.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.3.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.3.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.3.jpg" alt="">
                </a>
            </li>
        </ul>
        <ul v-show="index == 4">
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.4.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.4.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.4.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.4.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.4.jpg" alt="">
                </a>
            </li>
        </ul>
        <ul v-show="index == 5">
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.5.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.5.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.5.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.5.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="https://www.jq22.com/demo/jquery-tab-150428224544/images/1.5.jpg" alt="">
                </a>
            </li>
        </ul>
        </div>
    </div>
</template>
<script>
export default {
    name:"Index",
    data(){
        return {
            index: 1,
        }
    }
}
</script>
<style>
*{
    margin: 0;
    padding: 0;
}
.box{
    width: 1100px;
    height: 350px;
    margin: 50px auto 0;
    background: hsla(288, 98%, 50%, 0.205);
    border-radius: 25px;
}
.anniu{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
}
button{
    width: 18%;
    height: 100%;
    border: 4px solid greenyellow;
    margin: 0 3px;
    background: #ffffff;
    border-radius: 25px;
}
ul{
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
ul li{
    list-style: none;
    float: left;
    margin: 0 5px;
}
</style>